<script setup lang="ts">
import { getCurrentInstance, onBeforeMount, onUnmounted, Ref, ref } from "vue";
import { Subject, Subscription } from "rxjs";
import { load, formItemValueChange, useContextParams } from "@core";
import { IParam, IActionParam } from "@interface";
import { AppFormPage, AppFormGroup, AppFormItem, AppInput} from "@components";

interface FormProps{
  /**
   * @description 部件名称
   */
  name: string;

  /**
   * @description 传入上下文
   */
  contextProp: IParam;

  /**
   * @description 传入视图参数
   */
  viewParamsProp?: IParam;

  /**
   * @description 是否显示提示信息
   */
  showBusyIndicatorProp?: boolean;

  /**
   * @description 是否自动加载
   */
  isAutoLoad?: boolean;

  /**
   * @description 是否编辑
   */
  isEditable?: boolean;

  /**
   * @description 视图状态
   */
  viewState: Subject<IActionParam>;

  /**
   * @description 加载行为
   */
  loadAction?: string;

  updateAction?: string;

  createAction?: string;

  removeAction?: string;

  loadDraftAction: string;
}
interface FormEmit{
  (name: 'ctrlEvent', value: IActionParam): void
}
const props = withDefaults(defineProps<FormProps>(), {});
const emit = defineEmits<FormEmit>();
const { context, viewParams } = useContextParams(props);
let viewStateEvent: Subscription | undefined;
const form = getCurrentInstance()?.vnode;
defineExpose({
  form
})
const pages: IParam[] = [
  {
    title: "表单分页1"
  },
  {
    title: "表单分页2"
  },
]
const data: Ref<IParam> = ref({});
const detailsModel: Ref<IParam> = ref({});
const actionModel: Ref<IParam> = ref({});
const ctrlService: any = {};
const modelParam = {
  rules: {},
  logics: [],
  resetFormItems: [],
}

const runtimeParam = {
  ...props,
  data: data,
  actionModel: actionModel,
  ctrlService: ctrlService,
  detailsModel: detailsModel,
  emit: emit,
  context: context,
  viewParams: viewParams,
}

const editorEvent = ({ tag, action, data }: IActionParam) => {
  switch (action) {
    case 'valueChange':
      Object.assign(runtimeParam, {
        formItemName: tag,
        formItemValue: data,
      })
      formItemValueChange(modelParam, runtimeParam);
      break;
    default:
      console.warn('暂未解析该编辑器行为')
      break;
  }
}

const componentEvent = ({ tag, action, data }: IActionParam) => {
  switch (action) {
    case 'drDataSave':
      break;
  }
}
  
onBeforeMount(() => {
  if (props.viewState) {
    viewStateEvent = props.viewState.subscribe(({ tag, action, data }: IActionParam) => {
      if (Object.is(tag, props.name)) {
        switch (action) {
          case 'load':
            Object.assign(runtimeParam, {
              opts: data
            })
            load(modelParam, runtimeParam);
            break;
        }
      }
    });
  }
})
onUnmounted(() => {
  if (viewStateEvent) {
    viewStateEvent.unsubscribe();
  }
})
</script>

<template>
  <a-form name="form" class="app-form" :model="formData" :rules="rules">
    <AppFormPage
      name="text1"
      :pages="pages"
      @componentEvent="componentEvent"
    >
      <AppFormGroup name="text2" title="表单分组1">
        <AppFormItem name="item1" label="表单项1" error="错误提示测试">
          <AppInput name="item1" />
        </AppFormItem>
      </AppFormGroup>
    </AppFormPage>
  </a-form>
</template>

<style scoped>
.app-form {
  margin: 20px;
}
</style>